<template>
  <el-row class="user-info-form" type="flex" justify="center">
    <el-col>
      <div class="import-asset-wrap">
          <el-upload
              class="upload-asset"
              ref="upload"
              drag
              name="excelfile"
              accept=".xls,.xlsx"
              :data="parames"
              :action="actionUrl"
              :before-upload="beforeUpload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :on-error="handleError"
              :file-list="fileList"
              :auto-upload="false"
              multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">*只能上传xls/xlsx文件</div>
          </el-upload>
          <el-row class="download-temp-wrap">
              <span>请使用模板来上传你要添加的试题</span><a :href="downloadTempUrl">下载模板</a>
          </el-row>
          <el-row class="verifyidentity-button">
              <el-button @click.stop="close" round>取消</el-button>
              <el-button type="primary" @click="submitUpload" round>开始导入</el-button>
          </el-row>
      </div>
    </el-col>
  </el-row>
</template>
<script>
import { setTimeout } from 'timers';


export default {
  name:'ImportQuestion',
  props: {
    close: {
      type: Function,
      required: true,
      
    }
  },
  data() {
    return {
      fileList: [],
      actionUrl: this.GLOBAL.baseURL + 'exam/importQuestions',
      parames: {
        account: this.$store.state.userinfo.accountName
      },
      downloadTempUrl: this.GLOBAL.baseURL + 'exam/downQuestionsTemplate'
    }
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit()
    },
    beforeUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf('.')+1)				
      const isXSL = testmsg === 'xls'
      const isXLSX = testmsg === 'xlsx'
      if (!isXSL && !isXLSX) {
        this.$message({
          message: '上传文件只能是 xls、xlsx格式!',
          type: 'warning'
        });
        return false;
      }
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList)
    },
    handlePreview(file) {
      // console.log(file)
    },
    handleSuccess(res) {
      if(res.status === 200) {
        this.$message.success("文件上传成功！")
      } else {
        this.$message.warning(res.info);
      }
      this.close(true) 
    },
    handleError(err, file, fileList) {
        this.$message.error("文件上传失败！");
    }
  }
}
</script>
<style lang="scss">
.import-asset-wrap {
    .upload-asset {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .download-temp-wrap {
        margin-top: 20px;
        padding: 0 20px;
        line-height: 40px;
        background-color: #E6E6E6;
        a {
            float: right;
        }
    }
    .verifyidentity-button {
        margin-top: 20px;
    }
}
</style>
